<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>校园服务</title>
    <!-- 引入JQ -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <!--        <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">-->
    <!-- 引入 layui.js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!--    <script src="http://localhost:8080/static/layui/layui.js"></script>-->
    <link rel="stylesheet" href="http://localhost:8080/static/layui_extends/tableFilter.css">

    <link rel="stylesheet" href="http://localhost:8080/static/layui/css/layui.css">
    <link rel="stylesheet" href="http://localhost:8080/static/font-awesome/css/font-awesome.min.css">


    <!--    <link rel="import" href="leftNav3.html" id="page1">-->
    <!--    <link rel="import" href="car.html" id="page2">-->
</head>


<style>

</style>
<script src="../static/layui/layui.js"></script>
<script>
    layui.use(['element', 'form'], function () {
        var element = layui.element;

        element.on('nav(test)', function (elem) {
            console.log(elem)
        });
    });
</script>
<div class="layui-layout layui-layout-admin">
    <div>
        <!--  margin-bottom不为0会遮住下面的组件-->
        <!--        <div class="top" style="margin-bottom: 0px"></div>-->
        <ul class="mylayui-nav" style="z-index:1000;margin-left: 20px">
        <li class="mylayui-nav-item"><a href="/index">首页</a></li>
        <li class="mylayui-nav-item">
            <a id="teachAffairJump" href="#" th:onclick="teachAffairJump([[${role}]])">教务管理</a>
        </li>
        <li class="mylayui-nav-item"><a href="/mod3/index3">舍区管理</a></li>
        <li class="mylayui-nav-item"><a href="/mod3/index4">校园服务</a></li>
        <li class="mylayui-nav-item"><a href="">

            <img th:src="${headPic}" class="mylayui-nav-img" id="headPic">
            <span class="layui-badge-dot" id="dot" th:if="${msgs.size() gt 0}"></span>
        </a>

            <dl class="mylayui-nav-child">
                <dd>
                    <a href="" id="role" th:text="${role}"></a>
                </dd>
                <dd th:if="${username} ne ''">
                    <a href="/message">
                        消息
                        <span class="layui-badge" id="msgCount"
                              th:text="${msgs.size()}" th:if="${msgs.size()} gt 0">
                    </span>
                    </a>
                </dd>
                <dd>
                    <a href="/logout" th:if="${username} ne ''">
                        注销
                    </a>
                    <a href="/login" th:if="${username} eq ''">
                        登录
                    </a>
                </dd>
            </dl>
        </li>
    </ul>
        <!--    </div>-->
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md3">

                    <!--  正文    -->
                    <div class="layui-side layui-bg-black" style="width: 200px;align-content: flex-start">
                        <div class="layui-side-scroll">
                            <div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="false"></i>
                            </div>
                            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                            <ul id="left" class="layui-nav layui-nav-tree" lay-filter="test" style="">
                                <li class="layui-nav-item">
                                    <a class="" href="javascript:;" style="padding: 0 0px"><i
                                            class="fa fa-user-circle-o fa-lg"></i> <span>成绩管理</span></a>
                                    <dl class="layui-nav-child">
                                        <dd><a class="layui-this ScoreTest"
                                               href="javascript: $('#feed').load('/scoreQueryForStudent')"
                                               style="padding: 0 0px"><i class="fa fa-list fa-lg"></i> <span>成绩查询</span></a>
                                        </dd>
                                        <dd><a class="ScoreTest"
                                               href="javascript: $('#feed').load('/examScheduleQueryForStudent')"
                                               style="padding: 0 0px"><i class="fa fa-clipboard fa-lg"></i>
                                            <span>考试查询</span></a></dd>
                                        <!--                    <dd><a href="javascript: $('#feed').load(localhost+'/railwayMap.html')"-->
                                        <!--                           style="padding: 0 0px"><i class="fa fa-subway fa-lg"></i>-->
                                        <!--                      <span>轻轨地图</span></a></dd>-->
                                    </dl>
                                </li>
                                <li class="layui-nav-item">
                                    <a href="javascript:;" style="padding: 0 0px"><i class="fa fa-vcard fa-lg"></i>
                                        <span>课程管理</span></a>
                                    <dl class="layui-nav-child">
                                        <!--                                    <dd><a href="javascript: $('#feed').load(localhost+'/bookList.html')" style="padding: 0 0px"><i class="fa fa-th-list fa-lg"></i> <span >图书列表</span></a></dd>-->
                                        <dd><a href="javascript: $('#feed').load('/CourseScheduleQuery')"
                                               style="padding: 0 0px"><i class="fa fa-th-list fa-lg"></i>
                                            <span>课表查询</span></a></dd>
                                        <dd><a href="javascript: $('#feed').load('/absenceRecordQueryForStudent')"
                                               style="padding: 0 0px"><i class="fa fa-user-o fa-lg"></i>
                                            <span>考勤记录查询</span></a></dd>
                                        <dd><a href="javascript: $('#feed').load('/StudentAskForLeave')"
                                               style="padding: 0 0px"><i class="fa fa-subway fa-lg"></i>
                                            <span>课程请假</span></a></dd>
                                        <!--                                    <dd><a href="javascript: $('#feed').load(localhost+'/test.html');" style="padding: 0 0px"><i class="fa fa-send-o fa-lg"></i> <span >测试</span></a></dd>-->
                                    </dl>
                                </li>
                                <li class="layui-nav-item">
                                    <a href="javascript:;" style="padding: 0 0px"><i class="fa fa-search fa-lg"></i>
                                        <span>教室申请管理</span></a>
                                    <dl class="layui-nav-child">
                                        <!--                                    <dd><a href="javascript: $('#feed').load(localhost+'/bookList.html')" style="padding: 0 0px"><i class="fa fa-th-list fa-lg"></i> <span >图书列表</span></a></dd>-->
                                        <dd><a href="javascript: $('#feed').load('/studentApplicationClassroom')"
                                               style="padding: 0 0px"><i
                                                class="fa fa-share fa-lg"></i> <span>申请表填写</span></a></dd>
                                        <dd><a href="javascript: $('#feed').load('/studentApplicationRecord')"
                                               style="padding: 0 0px"><i
                                                class="fa fa-send-o fa-lg"></i> <span>申请记录查询</span></a></dd>
                                        <!--                                    <dd><a href="javascript: $('#feed').load(localhost+'/test.html');" style="padding: 0 0px"><i class="fa fa-send-o fa-lg"></i> <span >测试</span></a></dd>-->
                                    </dl>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <script>
                        //注意：导航 依赖 element 模块，否则无法进行功能性操作
                        console.log("hello");
                        var layer = layui.layer, form = layui.form;
                        // layer.msg('Hello Worl');
                        layui.use('element', function () {
                            var element = layui.element;

                            //…
                        });
                        console.log("hello2");

                        var isShow = true;  //定义一个标志位
                        $('.kit-side-fold').click(function () {
                            //选择出所有的span，并判断是不是hidden
                            $('.layui-nav-item span').each(function () {
                                if ($(this).is(':hidden')) {
                                    $(this).show();
                                } else {
                                    $(this).hide();
                                }
                            });
                            //判断isshow的状态
                            if (isShow) {
                                $('.layui-side.layui-bg-black').width(30); //设置宽度
                                $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
                                //将footer和body的宽度修改
                                $('.layui-body').css('left', 30 + 'px');
                                $('.layui-footer').css('left', 30 + 'px');
                                //将二级导航栏隐藏
                                $('ul#left li dd span').each(function () {
                                    $(this).hide();
                                });
                                //修改标志位
                                isShow = false;
                            } else {
                                $('.layui-side.layui-bg-black').width(200);
                                $('.kit-side-fold i').css('margin-right', '10%');
                                $('.layui-body').css('left', 200 + 'px');
                                $('.layui-footer').css('left', 200 + 'px');
                                $('ul#left li dd span').each(function () {
                                    $(this).show();
                                });
                                isShow = true;
                            }
                        });

                    </script>
                </div>
                <div class="layui-col-md9" style="width : 100%;">
                    <!--                <frame src="car.html"></frame>-->
                    <!--            <iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  src="car.html" ></iframe>-->
                    <!--            <div id="page2"></div>-->
                    <div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;z-index:0;">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-main">
                                <div id="LAY_preview">
                                    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
                                    <!--[if lt IE 9]>
                                    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
                                    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
                                    <![endif]-->

                                    <div style="margin: 20px auto; max-width: 1140px;">

                                        <!--                                    <blockquote class="layui-elem-quote">注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。</blockquote>-->


                                        <div id="feed">none</div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<script>

    layui.use('form', function () {
        var form = layui.form;
        //各种基于事件的操作，下面会有进一步介绍
        //过滤器test
        form.on('submit(test)', function (data) {

            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            layer.msg("test...");
            // login();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
    /**
     获取网站根目录
     */

    var localhost = "http://localhost:8080/static/mod3";

    function getBasePath() {
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        var localhostPaht = curWwwPath.substring(0, pos);
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName);
    };
    $(document).ready(function () {
        // $('.top').load('/head');

    });
    // $('.top').load(localhost+'/head');
    // layer.msg("form");

    function parseURL(url) {
        var a = document.createElement('a');
        a.href = url;
        return {
            source: url,
            protocol: a.protocol.replace(':', ''),
            host: a.hostname,
            port: a.port,
            query: a.search,
            params: (function () {
                var ret = {},
                    seg = a.search.replace(/^\?/, '').split('&'),
                    len = seg.length, i = 0, s;
                for (; i < len; i++) {
                    if (!seg[i]) {
                        continue;
                    }
                    s = seg[i].split('=');
                    ret[s[0]] = s[1];
                }
                return ret;
            })(),
            file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
            hash: a.hash.replace('#', ''),
            path: a.pathname.replace(/^([^\/])/, '/$1'),
            relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
            segments: a.pathname.replace(/^\//, '').split('/')
        };
    }

    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    console.log(parseURL(location.href))
    console.log(getQueryString("page"))
    var page = getQueryString("page");
    console.log("page: " + page);
    if (page !== 'null' && page !== null) {
        $('#feed').load('/' + page);
    } else {
        $('#feed').load('/scoreQueryForStudent');
    }

</script>

<script>
    function teachAffairJump(role) {
        console.log("role: " + role);
        if (role === '教师') {
            $('#teachAffairJump').attr('href', '/teachAffairManagementForTeacher');
        } else if (role === '学生') {
            $('#teachAffairJump').attr('href', '/studentAffairManagement');
        }
        else {
            $('#teachAffairJump').attr('href', '/login');
        }
    }
</script>

</html>